<template>
    <div>
        <scroller v-show="isShow" v-model="scrollerStatus" height="-46" lock-x scrollbar-y ref="scroller" :bounce="isbounce" :use-pullup="showUp" :pullup-config="upobj" @on-pullup-loading="selPullUp" class="scrollerHeight">
            <div class="box2">
                <div class="weui-panel  weui-panel_access">
                    <div v-for="list,  index  in  lists" class="weui-panel__bd">
                        <div class="list_item_pic">
                            <a :href="`/#/goods/${list.productId}?channelCode=${list.channelCode}`" class="weui-media-box  weui-media-box_appmsg">
                                <span style="font-size:20px;">Loading</span>
                                <x-img :src="getImagesUrl[index]" :webp-src="`${getImagesUrl[index]}?type=webp`" @on-success="success" @on-error="error" class="ximg-demo" error-class="ximg-error" :offset="-100" container="#vux_view_box_body"></x-img>
                            </a>
                        </div>
                        <div class="weui-media-box__bd">
                            <h4 class="weui-media-box__title">{{list.brandName}}</h4>
                            <p>{{list.productName}}</p>
                            <strong>￥{{list.salesPrice}}</strong>
                            <del>￥{{list.marketPrice}}</del>
                            <span>{{list.discount/10}}折</span>
                        </div>
                    </div>
                </div>
            </div>
        </scroller>
        <loading v-model="showloading" :text="textloading"></loading>
    </div>
</template>
<style>
@import './../css/searchList.css';
</style>
<script>
import {
    TransferDom,
    Popup,
    Group,
    XSwitch,
    Scroller,
    Loading,
    Panel,
    XImg
} from 'vux';
 export default {
    name: 'searchList',
    components: {
        TransferDom,
        Popup,
        Group,
        XSwitch,
        Scroller,
        Loading,
        Panel,
        XImg
    },
    directives: {
        TransferDom
    },
    data() {
        return {
            type: '1',
            PageIndex: 1, //页码从第一页开始
            PageSize: 20, //每页显示的条数
            isShow: false, //是否显示scroller,第一次请求数据过程中隐藏插件，不隐藏的时候会显示“请上拉刷新数据”的字样，不好看
            showloading: false,
            textloading: '加载中',
            showUp: true,
            isbounce: false,
            lists: [],
            upobj: {
                content: '请上拉刷新数据',
                pullUpHeight: 60,
                height: 40,
                autoRefresh: false,
                downContent: '请上拉刷新数据',
                upContent: '请上拉刷新数据',
                loadingContent: '加载中...',
                clsPrefix: 'xs-plugin-pullup-'
            },
            isShowLoading: false,
            textLoading: '加载中',
            scrollerStatus: {
                pullupStatus: 'default'
            },
            scroll: '', // 返回顶部 scrollTop;
            show: false, //transferDOM
            hasShow: false,
            haveShow: false,
            getImagesUrl: []
        }
    },
    mounted() {
        //第一次加载
        this.getNewsList(true);
        this.$nextTick(() => {
            this.$refs.scroller.reset()
        });
    },
    methods: {

        //图片懒加载成功
        success(list, ele) {
            // console.log('success load', list)
            const span = ele.parentNode.querySelector('span')
            ele.parentNode.removeChild(span)
        },
        //图片懒加载成功

        error(list, ele, msg) {
            console.log('error load', msg, list)
            const span = ele.parentNode.querySelector('span')
            span.innerText = 'load error'
        },

        //第一次商品列表页加载的时候容易为空true  列表数据渲染加载请求
        getNewsList(isEmpty) {
            this.showloading = true
            var page = this.PageIndex == 1 ? '' : 'currentPage=' + this.PageIndex + '&size=' + this.PageSize;
            var param = 'a_a_a_a_a_a_a_a_a_a_a_a.shtml'
            var getSearchGoods = window.config.interface.getSearchGoods + param + '?ts=&discountRate=a&word=&' + page;
            // 　　　　'index.php/search/get-search-goods/a_a_a_a_a_a_a_3_-1_a_a_a.shtml'
            this.$http.get(getSearchGoods).then(response => {
                // sucess callback
                var data = response.data.data.list;
                if (isEmpty) {
                    this.lists = []
                    this.show = false
                } else {
                    //isEmpty为false时，也就是向上滚动刷新selPullUp ()方法被被调用的时候
                    if (data && data.length === 0) {
                        this.showToast = true
                        this.isShowLoading = false
                        this.scrollerStatus.pullupStatus = 'disabled' // 禁用下拉
                        return
                    }
                }
                for (var i = 0; i < data.length; i++) {
                    this.lists.push(data[i]);
                }

                // 获取图片路径
                var getImagesUrl = [];
                var imagesUrl = this.lists
                for (var j = 0; j < imagesUrl.length; j++) {
                    getImagesUrl.push(imagesUrl[j].imgUrl_300_300.replace(/h_300/g, "h_410"))
                }
                this.getImagesUrl = getImagesUrl;
                
                this.isShow = true;
                this.showloading = false
                if (!isEmpty) {
                    this.scrollerStatus.pullupStatus = 'default'
                    this.$nextTick(() => {
                        this.$refs.scroller.reset()
                    })
                }
            }, response => {
                // error callback
                this.isShow = false
            });
        },
        selPullUp() {
            this.PageIndex++
                this.getNewsList(false)
        }
    },
    activated() {
        this.$refs.scroller.reset()
    }
}
</script>
